<template>
    <div id="hometop">
        <div :style="topbox">
          <div :style="logobox">
            <div :style="imgbox"><img :style="img"></div>
            <div :style="wordbox">
              <div :style="chlogowordbox">{{companyCnMsg}}</div>
              <div :style="enlogowordbox">{{companyEnMsg}}</div>
            </div>
          </div>
          <div :style="titlebox">
            <div :style="nowtimerbox">
              {{dateTime}}
            </div>
            <div :style="titlewordbox">
              {{titleMsg}}
            </div>
          </div>
          <div :style="warnlinkbox">
            <div>
              <span :style="warnlinkboxDiv" v-on:click="gotoMain()">{{topMenuMsg1}}</span>
            </div>
            <div>
              <span :style="warnlinkboxDiv" v-on:click="gotoSetup()">{{topMenuMsg2}}</span>
            </div>
            <div>
              <span :style="warnlinkboxDiv" v-on:click="loginOut()">{{topMenuMsg3}}</span>
            </div>
          </div>
        </div>
    </div>
</template>

<script type="text/javascript">

export default {
  name: 'hometop',
  data () {
    return {
      sign: '',
      companyCnMsg: '中软国际教育科技集团',
      companyEnMsg: 'CHINASOFT INTERNATIONA',
      titleMsg: '智慧工厂环境监测报警系统',
      topMenuMsg1: '首页报警',
      topMenuMsg2: '用户信息',
      topMenuMsg3: '退出登录',
      dateTime: '',
      sessionId: '',
      warnlinkboxDiv: {
        float: 'left',
        height: '45px',
        width: '170px',
        lineHeight: '45px'
      },
      warnlinkbox: {
        left: '340px',
        top: '15px',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        width: '520px',
        height: '45px',
        color: '#FFFFFF',
        textAlign: 'center',
        position: 'absolute'
      },
      syslinkboxDiv: {
        position: 'relative',
        float: 'left',
        height: '25px',
        width: '30px',
        lineHheight: '25px'
      },
      syslinkbox: {
        left: '240px',
        top: '40px',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        width: '100px',
        height: '25px',
        color: '#FFFFFF',
        fontSize: '12px',
        position: 'absolute'
      },
      titlebox: {
        position: 'absolute',
        right: '0px',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/9.png') + ')',
        width: '600px',
        height: '60px',
        color: '#85C5E8'
      },
      nowtimerbox: {
        fontSize: '12px',
        marginRight: '25px',
        float: 'right',
        position: 'relative',
        lineHeight: '60px'
      },
      titlewordbox: {
        fontSize: '14px',
        float: 'left',
        marginLeft: '220px',
        position: 'relative',
        lineHeight: '60px'
      },
      topbox: {
        position: 'relative',
        width: '100%'
      },
      logobox: {
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/7.png') + ')',
        width: '390px',
        height: '60px',
        color: '#FFFFFF',
        position: 'absolute'
      },
      wordbox: {
        width: '370px'
      },
      chlogowordbox: {
        height: '25px',
        marginTop: '8px',
        fontSize: '16px',
        position: 'relative',
        float: 'left',
        marginLeft: '5px'
      },
      imgbox: {
        height: '50px',
        marginTop: '3px',
        width: '50px',
        position: 'relative',
        float: 'left',
        marginLeft: '5px'
      },
      img: {
        content: 'url(' + require('@/assets/img/8.png') + ')',
        height: '50px',
        width: '50px'
      },
      enlogowordbox: {
        height: '23px',
        marginTop: '0px',
        fontSize: '8px',
        marginLeft: '5px',
        position: 'relative',
        float: 'left'
      }
    }
  },
  mounted () {
    this.sessionId = this.$route.query.username
    this.sign = this.$route.query.sign
    this.getdate()
    this.timer = setInterval(() => {
      this.getdate()
    }, 1000)
  },
  methods: {
    loginOut: function () {
      let postData = {
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-login/login/loginout', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data === 'success') {
          this.$router.push({path: '/'})
        }
      })
    },
    gotoSetup: function () {
      this.$router.push({path: '/setup', query: {username: this.sessionId, sign: this.sign}})
    },
    gotoMain: function () {
      this.$router.push({path: '/home', query: {username: this.sessionId, sign: this.sign}})
    },
    getdate: function () {
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = time.getDate()
      if (day < 10) {
        day = '0' + month
      }
      let week = weeks[time.getDay()]
      let hour = time.getHours()
      let minutes = time.getMinutes()
      if (minutes < 10) {
        minutes = '0' + minutes
      }
      let seconds = time.getSeconds()
      if (seconds < 10) {
        seconds = '0' + seconds
      }
      this.dateTime = year + '/' + month + '/' + day + ' ' + week + ' ' + hour + ':' + minutes + ':' + seconds
    }
  }
}
</script>

<style scoped>
  span:hover {
    color: #85C5E8 !important;
  }
  span{
    cursor:pointer !important;
  }
</style>
